<template>
  <div>
    <span>全选:</span>
     <!-- 关联全选框 -->
    <input type="checkbox" v-model="isAll" />
    <button @click="fan">反选</button>
    <ul>
      <li v-for="(obj,i) in arr" :key="i">
          <!-- 对象的属性也可以传值 -->
        <input type="checkbox" v-model="obj.c" />
        <span>{{obj.name}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
        // 思路：
        // 1.小选框选中，全选框自动选中
        // 2.点击全选，所有小选框影响
        // 3.点击反选，小选矿们各自取反
export default {
  data() {
    return {
      arr: [
        {
          name: "猪八戒",
          c: false,
        },
        {
          name: "孙悟空",
          c: false,
        },
        {
          name: "唐僧",
          c: false,
        },
        {
          name: "白龙马",
          c: false,
        },
      ],
    };
  },
    // 计算属性定义isAll
    computed:{
        isAll:{
            set(v){
                // console.log(v)
                // 把全选的状态值(true/false)
                this.arr.forEach(obj => obj.c = v);
            },
            get(){
                  // 全选状态由小选框的统计而来
            // every是数组的方法
           return this.arr.every(obj => obj.c === true)
            }
        }
    },
    methods: {
        // 小选框自己取反
       fan(){
            this.arr.forEach(obj => obj.c = !obj.c)
       }
    },

};
</script>

<style>
</style>